import React, { useRef, FC, memo } from 'react';
import { ActionType } from '@/components/ProTable';
import KeepAliveHoc from '@/components/KeepAliveHoc';
import styles from './index.less';
import DoorTable from './components/DoorTable';
import DoorGroup from './components/DoorGroup';
import IconFont from '@/components/IconFont';
import { useModel } from 'umi';
import ModalComponent from './components/DoorGroup/components/Modal';
import Drawer from './components/Drawer';
export const modelName = 'doorGroup';

const LeftComponent: FC<{}> = ({}) => {
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));
  return (
    <div className={styles['area-list-wrap']}>
      <div className={styles['area-list-header']}>
        <span className={styles['door-group-title']}>门组列表</span>
        <span
          className={styles['door-group-add']}
          onClick={() => {
            showModal(modelName + 'door-group-add');
          }}
        >
          <IconFont type={'iconxinzeng1'} />
          新增
        </span>
      </div>
      <DoorGroup />
    </div>
  );
};
const Card = () => {
  const actionRef = useRef<ActionType>();

  return (
    <div className={styles['user-container']}>
      <Drawer>
        <LeftComponent />
      </Drawer>
      <div className={styles['table-wrap']}>
        <DoorTable actionRef={actionRef} />
      </div>
      <ModalComponent />
    </div>
  );
};

export default KeepAliveHoc(memo(Card));
